<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象之选项卡</title>
    <style>
        p{
            display: none;
        }
        .active{
            display: block;
        }
    </style>
</head>
<body>
    <section class="btnlist">
        <button>选项1</button>
        <button>选项2</button>
        <button>选项3</button>
    </section>
    <section class="contant">
        <p class="active">内容1</p>
        <p>内容2</p>
        <p>内容3</p>
    </section>

    <script>

        /*  面向过程写法 */
        /* let conList = document.querySelectorAll('.contant p');
        // let btnList = document.querySelectorAll('.btnlist button');

        // 遍历btn绑定点击事件
        btnList.forEach((item,index)=>{
            item.onclick = () =>{
                // 排他思想
                conList.forEach(item=>{
                    item.style.display = 'none';
                })
                conList[index].style.display = 'block';
            }
        }); */

        /* 面向对象写法：将变量变为属性，将函数变为方法的方式 */
        /* // 构造函数
        function Tab(btnBox,conBox){
            // 获取元素
            this.btnBox = btnBox;
            this.btnList =  btnBox.querySelectorAll('button');
            this.conBox = conBox;
            this.conList =  conBox.querySelectorAll('p');
            
            // 设置索引值
            for(var i=0;i<this.btnList.length;i++){

                this.btnList[i].index = i;
                var _this = this;
                
                this.btnList[i].onclick = function(){
                    _this.change(this);
                };
            }
        };

        // 原型对象设置方法
        Tab.prototype.change = function(btn){

            for(var j=0;j<this.btnList.length;j++){
                this.conList[j].className='';
            }

            this.conList[btn.index].className='active';

        };

        
        let conBox = document.querySelector('.contant');
        let btnBox = document.querySelector('.btnlist');

        // 实例对象写入数据
        window.onload = () =>{
            new Tab(btnBox,conBox);
        } */


        // 构造函数
        function Tab(tab_selector,con_selector){
            // 获取元素
            this.btns = document.querySelectorAll(tab_selector);
            this.cons = document.querySelectorAll(con_selector);

            // 初始化索引值
            this.index = 0;

            // 调用
            this.bingEvent();
            this.changeTab();
        }

        // 原型对象
        Tab.prototype.bingEvent = function(){
            let self = this;
            // 循环绑定
            for(var i=0;i<self.btns.length;i++){
                // 绑定前给每个按钮存储索引值
                self.btns[i].index = i;
                self.btns[i].onclick = function(){
                    // 更改索引并执行切换方法
                    self.index = this.index;
                    self.changeTab();
                }
            }
        }

        // 注意不能用ES6的箭头函数写法，因为箭头函数的this指向window，会报错
        Tab.prototype.changeTab = function(){
            var self = this;
            
            // 清空所有并显示当前con
            for(var i=0;i<self.cons.length;i++){
                self.cons[i].className = '';
            }
            self.cons[self.index].className = 'active'
        }

        // 实例对象
        let tab1 = new Tab('.btnlist button','.contant p');

    </script>
</body>
</html>